<template>
  <div>{{ formattedTime }}</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

const formattedTime = ref("");

const weekDays = [
  "星期日",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
];

function updateTime() {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const date = String(now.getDate()).padStart(2, "0");
  const day = weekDays[now.getDay()];
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");

  formattedTime.value = `${year}-${month}-${date} ${day} ${hours}:${minutes}:${seconds}`;
}

let timer = null;

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000); // 每秒更新一次
});

onUnmounted(() => {
  clearInterval(timer); // 组件注销时销毁定时器
});
</script>

<style scoped>
/* 可根据需要添加样式 */
div {
  height: 25px;
  line-height: 25px;
  color: rgba(255, 255, 255, 1);
  font-size: 18px;
}
</style>
